<template>
  <div class="nav">
	  <div class="nav-left">
		  <div class="left-img">
			  <img src="../../../assets/img/flag.png" />
		  </div>
		  <div class="right-img">
			  <img src="../../../assets/img/fengsheng.png" />
		  </div>
	  </div>
	  <div class="nav-midde">
		  <div class="box" v-for="(item,index) in navigation" :key="index">
			  <div @click="fun(index)" :class="index == 1?'box-text hovers':'box-text'">
				  <div class="text" :style="select == index?'border-bottom: 2px solid #7BE2F9;':''">{{item}}</div>
				  <div class="hidden" v-if="index == 1">
				  	<div>无极榜单</div>
				  	<div>智能对比</div>
				  	<div>智能报告</div>
					<div>企业排行</div>
				  </div>
			  </div>
		  </div>
	  </div>
	  <div class="nav-right">
		  <div>
			  <div class="box">
				  <img src="../../../assets/img/sousuo.png" />
			  </div>
		  </div>
		  <div>
			  <div class="box">
				<img src="../../../assets/img/wenjian.png" />  
			  </div>
		  </div>
		  <div>
			  <div class="box">
				<img src="../../../assets/img/xiaoxi.png" />
			  </div>
		  </div>
		  <div>
			  <div class="box">
				<img src="../../../assets/img/wode.png" />
			  </div>
			  <!-- <div style="color: #000000;">
			  	<div>个人中心</div>
			  	<div>退出</div>
			  </div> -->
		  </div>
	  </div>
  </div>
</template>

<script>
export default {
    props: {
        
    },
    data() {
        return {
            select:0,	//当前选中
			navigation:['金融行业','智能分析','我的企业'],	//导航
        }
    },
    methods: {
        fun(index){
			this.select = index
			this.$emit('fun')
		}
    }
}
</script>
<style scoped lang="scss">
	div{
		box-sizing: border-box;
	}
	
	.nav{
		border-bottom: 1px solid #222855;
		display: flex;
		height: 50px;
		background-color: #081043;
		align-items: center;
		padding-left: 40px;
		padding-right: 40px;
		justify-content: space-between;
	}
	
	.nav-left{
		flex: 1;
		text-align: left;
		display: flex;
		align-items: center;
		
		img{
			width: 100%;
			height: 100%;
		}
		
		.left-img{
			width: 40px;
			height: 26px;
			margin-right: 16px;
		}
		
		.right-img{
			width: 44px;
			height: 18px;
		}
	}
	
	.nav-midde{
		display: flex;
		color: #FFFFFF;
		text-align: center;
		
		.box{
			width: 134px;
			
			/* .hovers:hover .hidden{
				display: block;
			} */
		}
		
		.box-text{
			width: 134px;
			height: 50px;
			line-height: 50px;
			margin: 0 auto;
		}
		
		.text{
			width: 64px;
			margin: 0 auto;
			height: 50px;
		}
		
		.hidden{
			background-color: #273565;
			display: none;
			
			div{
				height: 33px;
				line-height: 33px;
				font-size: 14px;
			}
			
			div:hover{
				background-color: #162350;
			}
		}
	}
	
	.nav-right{
		flex: 1;
		text-align: right;
		color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		
		div{
			margin-left: 30px;
			height: 24px;
		}
	}
</style>
